'use client'

import { signIn } from 'next-auth/react'
import TestLoginForm from './TestLoginForm'

export default function LoginClient() {
  const handleWeChatLogin = () => {
    // 从URL获取callbackUrl
    const url = new URL(window.location.href);
    const callbackUrl = url.searchParams.get('callbackUrl') || '/ty/zh/profile';

    signIn('wechat', {
      callbackUrl: callbackUrl,
      redirect: false
    })
  }

  return (
    <div className="min-h-screen flex flex-col items-center justify-center px-4 py-6 sm:px-6">
      <div className="w-full max-w-sm sm:max-w-md space-y-6 p-5 sm:p-8 bg-white rounded-xl shadow-lg mx-auto">
        {/* Logo 区域 */}
        <div className="flex flex-col items-center">
          <div className="w-36 h-36 sm:w-48 sm:h-48 md:w-56 md:h-56 relative mb-4">
            <img
              src="https://uptimetime.com/bandao.png"
              alt="半岛Logo"
              className="object-contain w-full h-full"
              priority
            />
          </div>
          <p className="mt-2 text-center text-xs sm:text-sm text-gray-600">
            欢迎登录半岛网球管理系统
          </p>
        </div>

        <div className="space-y-5">
          {/* 微信登录按钮 */}
          <button
            onClick={handleWeChatLogin}
            className="w-full flex items-center justify-center gap-2 py-2.5 sm:py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 transition-colors duration-200"
          >
            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.49.49 0 0 1-.011-.165.49.49 0 0 1 .19-.39C23.088 18.782 24.1 17.043 24.1 15.1c0-3.382-3.067-6.18-7.162-6.242zm-2.73 3.682c.534 0 .968.441.968.984a.976.976 0 0 1-.968.983.976.976 0 0 1-.969-.983c0-.543.435-.984.969-.984zm4.844 0c.534 0 .969.441.969.984a.976.976 0 0 1-.969.983.976.976 0 0 1-.968-.983c0-.543.434-.984.968-.984z"/>
            </svg>
            使用微信登录
          </button>

          {process.env.NEXT_PUBLIC_ENABLE_TEST_AUTH && (
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-200"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-white text-gray-500">或</span>
            </div>
          </div>
          )}
          {/* 测试登录表单 */}
          <TestLoginForm />

        </div>
      </div>

      <footer className="mt-6 text-center text-xs sm:text-sm text-gray-500 px-4 w-full">
        © 2025 半岛网球. 保留所有权利
      </footer>
    </div>
  )
}